<template>
  <a-modal v-model:visible="visible" title="修改密码" @ok="handleOk" @cancel="close">
    <div class="change-password">
      <a-form :model="formState" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
        <a-form-item label="原始密码" name="originalPassword" :rules="[{ required: true, message: '原始密码必填' }]">
          <a-input v-model:value="formState.originalPassword" />
        </a-form-item>

        <a-form-item label="密码" name="password" :rules="[{ required: true, message: '新密码必填' }]">
          <a-input-password v-model:value="formState.password" />
        </a-form-item>

        <a-form-item label="确认密码" name="affirmPassword" :rules="[{ required: true, message: '确认密码必填' }]">
          <a-input-password v-model:value="formState.affirmPassword" />
        </a-form-item>
      </a-form>
    </div>
  </a-modal>
</template>

<script lang="ts" setup name="ChangePassword">
/** 修改密码
 * setup
 * @param {*}
 * @returns
 */
import { useAppStore } from '@/stores/app'
import { verify } from './index'
interface FormState {
  originalPassword: string
  password: string
  affirmPassword: string
}

const formState = reactive<FormState>({
  originalPassword: '',
  password: '',
  affirmPassword: ''
})

// 重置数据
const resetFormState = () => {
  formState.originalPassword = ''
  formState.password = ''
  formState.affirmPassword = ''
}

const appStore = useAppStore()
const visible = ref(appStore.isShowChangePassword)

watch(appStore, () => {
  visible.value = appStore.isShowChangePassword
})

const handleOk = () => {
  if (verify(formState)) {
    resetFormState()
    appStore.toogleShowChangePassword()
  }
}

const close = () => {
  appStore.toogleShowChangePassword()
}
</script>

<style lang="less">
@import './index.less';
</style>
